<template>
  <div class="home">
    <div class="home-header">
      <img class="home-header-img" src="../assets/choubuting.svg" alt="" />
    </div>
    <div
      style="width: 100%; display: flex; justify-content:space-between;"
      @click="MyPrize"
    >
    <div></div>
      <div class="home-prize">
        <img src="../assets/liwu.svg" alt="" />
      </div>
    </div>
    <div class="home-content">
      <div class="home-content-pandi">
        <div class="home-content-pandi-residue">
          <img
            class="home-content-pandi-residue-img"
            src="../assets/zhuanpandi.svg"
            alt=""
          />
          <p class="home-content-pandi-residue-p">剩余{{ times }}次</p>
        </div>
      </div>
      <div
        v-show="startFlag"
        class="home-content-start"
        @click="startCallback"
      ></div>
      <LuckyWheel
        style="
          left: 0;
          right: 0;
          margin: auto;
          bottom: -11%;
          position: relative;
        "
        ref="myLucky"
        width="9rem"
        height="9rem"
        :defaultConfig="defaultConfig"
        :prizes="prizes"
        :blocks="blocks"
        :buttons="buttons"
      />
    </div>
    <div class="home-nameList">
      <div class="home-nameList-header">
        <div class="home-nameList-header-title">
          <img
            class="home-nameList-header-title-img"
            src="../assets/left.svg"
            alt=""
          />
          <p class="home-nameList-header-title-p">今日中奖</p>
          <img
            class="home-nameList-header-title-img"
            src="../assets//right.svg"
            alt=""
          />
        </div>
      </div>
      <div class="home-nameList-mingdan" style="overflow: hidden">
        <img
          class="home-nameList-mingdan-img"
          src="../assets/mingdan.svg"
          alt=""
        />
        <van-swipe
          vertical
          :autoplay="2000"
          :show-indicators="false"
          :width="400"
          :touchable="false"
          class="home-nameList-mingdan-name"
        >
          <van-swipe-item default="2">
            <div class="home-nameList-mingdan-name-lis">
              <div class="home-nameList-mingdan-name-lis-text">123****</div>
              <div class="home-nameList-mingdan-name-lis-text">1元微信红包</div>
            </div>
            <div class="home-nameList-mingdan-name-lis">
              <div class="home-nameList-mingdan-name-lis-text">123****</div>
              <div class="home-nameList-mingdan-name-lis-text">1元微信红包</div>
            </div>
            <div class="home-nameList-mingdan-name-lis">
              <div class="home-nameList-mingdan-name-lis-text">123****</div>
              <div class="home-nameList-mingdan-name-lis-text">1元微信红包</div>
            </div>
          </van-swipe-item>
          <van-swipe-item default="2">
            <div class="home-nameList-mingdan-name-lis">
              <div class="home-nameList-mingdan-name-lis-text">123****</div>
              <div class="home-nameList-mingdan-name-lis-text">1元微信红包</div>
            </div>
            <div class="home-nameList-mingdan-name-lis">
              <div class="home-nameList-mingdan-name-lis-text">123****</div>
              <div class="home-nameList-mingdan-name-lis-text">1元微信红包</div>
            </div>
            <div class="home-nameList-mingdan-name-lis">
              <div class="home-nameList-mingdan-name-lis-text">123****</div>
              <div class="home-nameList-mingdan-name-lis-text">1元微信红包</div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="home-rule">
      <div class="home-rule-header">
        <div class="home-tousu" @click="tousu">
          <img
            src="../assets/tousu.svg"
            alt=""
            style="vertical-align: middle"
          />
          <span>投诉</span>
        </div>
        <div class="home-rule-header-title">
          <img
            class="home-rule-header-title-img"
            src="../assets/left.svg"
            alt=""
          />
          <p class="home-rule-header-title-p">活动规则</p>
          <img
            class="home-rule-header-title-img"
            src="../assets/right.svg"
            alt=""
          />
        </div>
        <div class="home-kefu">
          <p>客服</p>
          <img src="../assets/kefu.svg" alt="" />
        </div>
      </div>
      <div class="home-rule-content">
        <p>
          {{ activeRuIu.title }}
        </p>
        <p>
          {{ activeRuIu.first }}
        </p>
        <p>
          {{ activeRuIu.second }}
        </p>
        <p>
          {{ activeRuIu.third }}
        </p>
        <p>
          {{ activeRuIu.third }}
        </p>
        <p>
          {{ activeRuIu.fourth }}
        </p>
        <p>
          {{ activeRuIu.fifth }}
        </p>
        <p>
          {{ activeRuIu.sixth }}
        </p>
        <p>
          {{ activeRuIu.seventh }}
        </p>
        <p>
          {{ activeRuIu.eighth }}
        </p>
        <p>
          {{ activeRuIu.ninth }}
        </p>
        <p>
          {{ activeRuIu.tenth }}
        </p>
        <p style="color: #ca352c">
          {{ activeRuIu.bottom }}
        </p>
      </div>
    </div>
    <!-- 中奖弹框 -->
    <van-popup
      v-model="lotteryShow"
      round
      :style="{ width: '70%' }"
      ref="lotteryShow"
      @close="closelottery"
    >
      <div class="home-coupon">
        <div class="home-coupon-header">
          <img
            class="home-coupon-header-liwu"
            src="../assets/liwu3.svg"
            alt=""
          />
          <span class="home-coupon-header-content">恭喜中奖啦！</span>
        </div>
        <div class="home-coupon-content" style="display:flex;justify-content:center;align-items:center">
          <div class="home-coupon-content-jiangxiang">
            <img
              :src="draws.pic"
              alt=""
            />
          </div>
          <div class="home-coupon-content-quan">
            <div v-if="draws.id != 5" style="position: relative; width: 100%">
              <img src="../assets/quandi.svg" alt="" />
              <p class="home-coupon-content-text">在 “我的奖品” 中查看</p>
            </div>
          </div>
        </div>
        <div class="home-coupon-bottom" @click="receivePrise">立即领取</div>
      </div>
    </van-popup>
    <!-- 投诉 -->
    <van-popup
      v-model="complaintShow"
      round
      :style="{ width: '80%' }"
      ref="lotteryShow"
      class="home-suggestion"
    >
      <div>
        <div>
          <img
            class="home-suggestion-headerImg"
            src="../assets/choubuting.svg"
            alt=""
          />
        </div>
        <p class="home-suggestion-title">请描述投诉该活动的原因</p>
        <van-field
          type="number"
          v-model="tel"
          maxlength="11"
          placeholder="请填写您的联系电话"
          class="home-suggestion-iphone"
        />
        <van-field
          type="textarea"
          v-model="complaint"
          rows="2"
          autosize
          autofocus
          maxlength="200"
          placeholder="请描述原因(200字)以下"
          show-word-limit
          class="home-suggestion-complaint"
        />
        <div class="home-suggestion-bottom" @click="submitComments">
          立即提交
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import {
  activityRules,
  actList,
  luckyDraw,
  DrawNums,
  newSuggestion,
} from "../api/LuckyDraw";
import bigWheel from "../assets/bigWheel.png";
import button from "../assets/point.svg";
export default {
  data() {
    return {
      index: 0,
      complaintShow: false,
      tel: "", //意见电话
      complaint: "", //意见
      lotteryShow: false,
      times: 3,
      activeRuIu: {}, //活动规则
      drawItemList: [], //奖品列表
      blocks: [
        {
          padding: "1.4rem",
          imgs: [
            {
              src: bigWheel,
              width: "100%",
              height: "100%",
            },
          ],
        },
      ],
      defaultConfig: {
        speed: 5,
        gutter: "0.1px",
      },
      prizes: [
        {
          background: "white",
          fonts: [
            {
              text: "奖品一",
              fontSize: "0.3rem",
              fontColor: "red",
              top: "10%",
            },
          ],
        },
      ],
      buttons: [
        {
          radius: "45%",
          imgs: [
            {
              src: button,
              width: "1.5rem",
              top: "-80%",
            },
          ],
        },
      ],
      startFlag: true,
      draws: {}, //中奖奖品
      shopid: "101", //商户id
      openid: "eeee",
      actid: "1", //活动id
      ruleid: "1", //规则id
    };
  },
  created() {
    // this.shopid = this.$route.query.shopid;
    // this.openid = this.$route.query.openid;
    // this.actid = this.$route.query.actId;
    // this.ruleid = this.$route.query.ruleId;
    // 活动规则
    this.activiRules();
    // 查询奖品列表
    this.drawList();
    // 中奖次数
    this.luckyNums();
  },
  mounted() {
    //初始化转盘
    this.initial();
  },
  methods: {
    // 跳转到我的奖品页面
    MyPrize() {
      this.$router.push(`/myPrize?appId=${this.openid}`);
    },
    // 转盘初始速度
    initial() {
      this.startFlag = true;
      this.defaultConfig.speed = 1;
      this.$refs.myLucky.play();
    },
    // 投诉
    tousu() {
      this.complaintShow = true;
      this.complaint = "";
      this.tel = "";
    },
    // 开始抽奖
    startCallback() {
      if (this.times <= 0) {
        this.$toast.fail("您今天没有机会了，明天再来吧！");
        return;
      }
      this.startFlag = false;
      this.defaultConfig.speed = 15;
      this.$refs.myLucky.play();
      // 开始抽奖 saleId是活动id
      luckyDraw({ saleId: this.actid, appId: this.openid })
        .then((res) => {
          if (res.data.code == 200) {
            let index = this.drawItemList.findIndex((item) => {
              return item.itemId == res.data.data.id;
            });
            setTimeout(() => {
              this.draws = res.data.data;
              this.$refs.myLucky.stop(index);
              setTimeout(() => {
                if (this.draws.id == 5) {
                  this.initial();
                } else {
                  this.lotteryShow = true;
                }
                this.startFlag = true;
                this.luckyNums();
              }, 3000);
            }, 2000);
          } else {
            this.$toast.fail(res.data.msg || "服务器开小差了，请稍后重试");
            this.initial();
          }
        })
        .catch(() => {
          this.$toast.fail("服务器开小差了，请稍后重试");
          this.initial();
        });
    },
    // 关闭弹窗
    closelottery() {
      this.initial();
      this.lotteryShow = false;
    },
    // 立即领取
    receivePrise() {
      this.initial();
      this.lotteryShow = false;
      this.$router.push(`/myPrize?appId=${this.openid}`);
    },
    // 活动规则 id是规则id
    activiRules() {
      activityRules({ id: this.ruleid })
        .then((res) => {
          if (res.data.code == 200) {
            this.activeRuIu = res.data.rows[0];
          } else {
            this.$toast.fail("0000");
          }
        })
        .catch(() => {
          this.$toast.fail("服务器开小差了，请稍后重试");
        });
    },
    // 查询奖品列表 actId是活动id
    async drawList() {
      let { data } = await actList({ actId: this.actid });
      if (data.code == 200) {
        data = data.rows;
        console.log("data", data);
        this.prizes = data.map((item, index) => {
          return {
            background: index % 2 == 0 ? "white" : "#F7E8DC",
            fonts: [
              {
                text: item.name,
                fontSize: "0.3rem",
                fontColor: "red",
                top: "30%",
              },
            ],
            imgs: [{ src: item.pic, height: "50%", top: "60%" }],
          };
        });
        this.drawItemList = data;
      } else {
        this.$toast.fail(data.msg);
      }
    },
    // 抽奖次数
    luckyNums() {
      DrawNums({ appId: this.openid })
        .then((res) => {
          if (res.data.code == 200) {
            this.times = res.data.data;
            if (this.times <= 0) {
              this.times = 0;
            }
          } else {
            this.$toast.fail(res.data.msg);
          }
        })
        .catch(() => {
          this.$toast.fail("服务器开小差了，请稍后重试");
        });
    },
    // 提交意见
    submitComments() {
      let phonetast =
      /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
          this.tel
        );
      if (!phonetast) {
        this.$toast.fail("您的手机号输入有误！");
        return;
      }
      newSuggestion({
        appId: "123",
        phone: this.tel,
        remark: this.complaint,
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.complaintShow = false;
            console.log("新增意见成功");
          } else {
            this.$toast.fail(res.data.msg);
          }
        })
        .catch(() => {
          this.$toast.fail("服务器开小差了，请稍后重试");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
img {
  width: 100%;
  height: 100%;
}
.home {
  width: 100%;
  min-height: 100%;
  background-image: url("../assets/yuedui.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  // background-size: contain;
  &-header {
    width: 90%;
    flex: 0 0 4.5rem;
    position: relative;
    &-img {
      position: absolute;
      left: 0;
      top: 0.5rem;
    }
  }
  &-content {
    // flex: 0 0 10rem;
    width: 100%;
    position: relative;
    height: 100%;
    &-start {
      width: 1.5rem;
      height: 1.5rem;
      position: absolute;
      left: 0rem;
      right: 0;
      top: 0rem;
      bottom: 0;
      margin: auto;
      z-index: 9;
      border-radius: 50%;
    }
    &-pandi {
      height: 30%;
      width: 100%;
      position: absolute;
      bottom: -1.2rem;
      &-residue {
        &-p {
          position: absolute;
          top: 1rem;
          left: 0;
          right: 0;
          width: 2.3rem;
          background: #ab271e;
          margin: auto;
          color: white;
          border-radius: 2rem;
          padding: 0.1rem;
          font-size: 10rpx;
        }
      }
    }
  }
  &-nameList {
    flex: 0 0 4.5rem;
    padding-top: 2rem;
    background: #ca352c;
    width: 100%;
    &-header {
      display: flex;
      width: 100%;
      justify-content: center;
      &-title {
        display: flex;
        align-items: center;
        &-img {
          width: 1rem;
        }
        &-p {
          padding: 0 0.5rem;
          color: white;
        }
      }
    }
    &-mingdan {
      position: relative;
      &-name {
        position: absolute;
        left: 0;
        right: 0;
        top: 1.1rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        &-lis {
          width: 100%;
          padding: 0.1rem 0;
          display: flex;
          flex-wrap: wrap;
          &-text {
            width: 50%;
          }
        }
      }
    }
  }
  &-rule {
    background: #ca352c;
    padding-top: 0.5rem;
    width: 100%;
    &-header {
      display: flex;
      width: 100%;
      justify-content: space-between;
      &-title {
        display: flex;
        align-items: center;
        &-img {
          width: 1rem;
        }
        &-p {
          padding: 0 0.5rem;
          color: white;
        }
      }
    }
    &-content {
      margin: 0.6rem;
      background: white;
      border-radius: 0.5rem;
      padding: 0.5rem 0.2rem;
      text-align: left;
      p {
        line-height: 0.7rem;
      }
    }
  }
  &-tousu {
    display: flex;
    background: #f9d574;
    border-radius: 0 0.3rem 0.3rem 0;
    padding: 0.1rem 0.2rem 0.1rem 0.1rem;
    align-items: center;
    justify-content: center;
    p {
      margin: 0 0.1rem;
    }
    img {
      width: 0.5rem;
    }
  }
  &-kefu {
    display: flex;
    background: #f9d574;
    border-radius: 0.3rem 0 0 0.3rem;
    padding: 0.1rem 0.1rem 0.1rem 0.2rem;
    align-items: center;
    justify-content: center;
    p {
      margin: 0 0.1rem;
    }
    img {
      width: 0.5rem;
    }
  }
  &-prize {
    width: 1.5rem;
    border-radius: 50%;
    margin-right: 0.5rem;
  }
  &-coupon {
    background: #ca352c;
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    &-header {
      display: flex;
      align-items: center;
      // flex: 0 0 1.5rem;
      justify-content: center;
      &-liwu {
        width: 1.5rem;
      }
      &-content {
        color: white;
        font-size: 0.5rem;
        margin-left: 0.3rem;
      }
    }
    &-content {
      flex: 0 0 5rem;
      background: white;
      border-radius: 0.3rem;
      background-size: 10%;
      margin: 0.5rem 0;
      position: relative;
      &-jiangxiang {
        height: 65%;
      }
      &-quan {
        position: absolute;
        bottom: -0.5rem;
        width: 100%;
      }
      &-text {
        position: absolute;
        top: 50%;
        bottom: 0;
        color: white;
        left: 0;
        right: 0;
      }
    }

    &-bottom {
      flex: 0 0 1rem;
      background: #f9d574;
      line-height: 1rem;
      border-radius: 0.2rem;
    }
  }
  &-suggestion {
    padding: 0.3rem;
    background-color: #ab271e;
    &-headerImg {
      width: 100%;
      height: 1rem;
    }
    &-title {
      margin-bottom: 0.3rem;
      color: white;
      font-size: 0.4rem;
    }
    &-iphone {
      border-radius: 0.2rem;
    }
    &-complaint {
      margin: 0.3rem 0;
      border-radius: 0.2rem;
    }
    &-bottom {
      background-color: #f9d574;
      border-radius: 0.2rem;
      height: 0.8rem;
      line-height: 0.8rem;
    }
  }
}
</style>